<template>
  <view>
    <!-- 产品列表 -->
    <u-empty mode="car" v-if="cart.length === 0" marginTop="200rpx"></u-empty>
    <!-- 外层容器 -->
    <u-swipe-action class="list">
      <!-- 每一行都是一个 item, 里面包着你想显示的内容, 记得在这里就遍历 -->
      <u-swipe-action-item
        :options="options1"
        v-for="item in cart"
        :key="item.goods_id"
        @click="delGoods(item)">
        <view class="item" @longpress="delGoods(item)">
          <checkbox-group @change="goodsChange(item.goods_id)">
            <checkbox
              shape="circle"
              activeColor="#EA4350"
              class="left"
              :checked="item.isCheck"
            ></checkbox>
          </checkbox-group>
          <image class="middle" :src="item.goods_small_logo"></image>
          <view class="right">
            <navigator
              :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
              class="top u-line-2"
            >
              {{ item.goods_name }}
            </navigator>
            <view class="bottom">
              <view class="price">¥{{ item.goods_price }}</view>
              <view class="number-wrap">
                <!-- 商品数量 -->
                <uni-number-box v-model="item.number" :min="1"> </uni-number-box>
              </view>
            </view>
          </view>
        </view>
      </u-swipe-action-item>
    </u-swipe-action>

    <!-- 底部提交工具栏 -->
    <view class="submit-bar">
      <checkbox-group @change="toggleAllCheck">
        <checkbox
          shape="circle"
          activeColor="#EA4350"
          class="left"
          labelSize="12px"
          :checked="isAllCheck"
        />
        <label>全选</label>
      </checkbox-group>
      <view class="total-price">
        合计: <text class="number">¥ {{ totalPrice }}</text>
      </view>
      <!-- 这里不能用 navigator 因为要根据具体有没有选中买东西的状态,决定是不是要跳转页面
      需要用到编程式导航 this.$router.push-->
      <view class="to-buy" @click="toPay">去结算({{ totalNumber }})</view>
    </view>
  </view>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      options1: [
        {
          text: "删除",
          style: {
            backgroundColor: "#f56c6c",
          },
        },
      ],
    };
  },
  computed: {
    ...mapState(["cart"]),
    ...mapGetters(["isAllCheck", "totalPrice", "totalNumber"]),
  },
  onShow() {
    console.log(87, this.cart);
  },
  methods: {
    ...mapMutations(["toggleCheck", "delGoods"]),
    // 左滑删除商品
    // delGoods(item) {
    //   uni.showModal({
    //     title: "确认删除",
    //     content: "确定要删除该商品吗？",
    //     success: (res) => {
    //       if (res.confirm) {
    //         // 用户点击了确认按钮，执行删除操作
    //         this.$store.commit("delGoods", item.goods_id);
    //       }
    //     },
    //   });
    // },
    // 全选控制单选
    toggleAllCheck() {
      console.log("点击全选状态", this.isAllCheck);
      console.log("希望的全选状态", !this.isAllCheck);
      this.$store.commit("toggleAllCheck", !this.isAllCheck);
    },
    goodsChange(id) {
      this.toggleCheck(id);
    },
    // 点击支付
    toPay() {
      if (this.totalNumber > 0) {
        // 跳转至支付页
        uni.navigateTo({
          url: "/pages/pay/pay",
        });
      } else {
        uni.showToast({
          title: "请选择商品",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss">
.list {
  padding-bottom: 100rpx;
}
.item {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  padding: 28rpx 35rpx;
  .middle {
    width: 191rpx;
    height: 191rpx;
    flex-shrink: 0;
  }
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 170rpx;
    padding-left: 19rpx;
    .bottom {
      display: flex;
      justify-content: space-between;
      .price {
        color: #ea4350;
      }
      .number-wrap {
        display: flex;
        .number {
          margin: 0 10rpx;
        }
      }
    }
  }
}
.submit-bar {
  z-index: 999;
  box-sizing: border-box;
  padding: 0 35rpx;
  height: 83rpx;
  position: fixed;
  // 我们希望, 如果在小程序, bottom:0 如果在h5 bottom 为 50px
  // #ifdef MP-WEIXIN
  bottom: 0;
  // #endif

  /* #ifdef H5*/
  bottom: 50px;
  /* #endif*/

  background-color: #fff;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 26rpx;
  .total-price {
    padding-left: 20rpx;
    flex: 1;
    .number {
      color: #ea4350;
    }
  }

  .to-buy {
    line-height: 52rpx;
    background-color: #ea4350;
    color: #fff;
    padding: 0 26rpx;
    border-radius: 26rpx;
  }
}
</style>